import React, { Component } from 'react'
import { Icon, Button, Table, Switch, Form, Input, Popconfirm } from 'antd'
import { IndexLink, Link } from 'react-router'

import AddInput from './AddInput'
const FormItem = Form.Item;


export class WilddogRoom extends Component {
  constructor(props) {
    super(props);

    this.columns = [{
      title: '留言名称',
      dataIndex: 'name',
      key: 'name',
      width: '20%',
      render: text => <span className="cellItem_name">{text}</span>,
    }, {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      sorter: (a, b) => a.createdAt - b.createdAt,
      render: (text) => {
        let newDate = new Date();
        newDate.setTime(text);
        return <p>{newDate.toLocaleDateString("zh-cn",{weekday: "long", year: "numeric", month: "long", day: "numeric","hour": "numeric","minute":"numeric"})}</p>
      },
    },{
      title: '房间ID',
      dataIndex: 'id',
      key: 'roomid',
    },  {
      title: '查看',
      dataIndex: 'id',
      key: 'id',

      render: (text, record, index) => (<div className="setting">
                                        <p>
                                         {this.props.auth.status?
                                            <Button type="primary"> 
                                                <Link to={{pathname:`/wilddog/room/${record.id}`}} >
                                                  管理留言
                                                </Link>
                                             </Button>: <span>暂无权限</span>
                                          
                                       }
                                        </p>
                                      </div>)
    }]

    this.addOneUpHandler = this.addOneUpHandler.bind(this)
    this.tableExpandedRowRender = this.tableExpandedRowRender.bind(this)
  }
  addOneUpHandler(name) {
    let { auth } = this.props;
    let payload = {
      createdByUserId: auth.uid,
      name: name,
      type: 'public'
    }
    if (payload.type === 'private') {
      console.log('私有聊天室');
    }
    this.props.addRoom(payload)
  }
  authorizeHandler = (roomRef) => {
    // let payload={...roomId,userInfo};

    // this.props.authorizeUser(roomRef)
    return <p>123</p>

  }
  componentWillMount() {

    this.props.getRooms();
  }

  tableExpandedRowRender(record) {
    let { authorizedUsers, userInfo } = record;
    let userList = authorizedUsers ? Object.keys(authorizedUsers) : [];
    userInfo ? null : this.props.getUser(record.createdByUserId);

    return (
      <div className="room-userList">
         {userInfo?( <div className="room-userList-create flexItem">

            <div className="room-userList-photo"><img src={userInfo.photo} alt=""/></div>
            <div className="room-userList-name">{userInfo.name}</div>
          </div>):<div className="room-userList-create flexItem">Loading</div>}
          <div className="room-userList-authorized flexItem">
           <Button type="dashed"  onClick={this.authorizeHandler.bind(this,record)} >
            <p><Icon type="plus" style={{lineHeight:4}} /> </p>
            <p>添加一个授权者</p>
          </Button>
          </div>
        </div>
    )
  }

  render() {
    // console.log(this.props)
    let { auth } = this.props;
    let { roomData, roomFetching } = this.props.wilddog;



    return (
      <div id="wilddog-room">
            <div className="container-wilddog">
              {auth.status?<AddInput  handAdd={this.addOneUpHandler} />:<h2></h2>}
  
                   
        <Table
              loading={roomFetching}
             columns={this.columns}
              expandedRowRender={auth.status&&false?record =>{ return this.tableExpandedRowRender(record)}:false}
              dataSource={roomData}
              className="table"
          />
            </div>
        
      </div>

    )
  }
}


export default WilddogRoom
